<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>00_echarts基础概念</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>

</body>
<script src="./js/echarts.min.js"></script>
<script>

  // 初始化echarts
  let my_chart = echarts.init(document.querySelector('#main'))
  //   指定团的配置项和数据: options 里面一个对象就是一个组件
  let options = {
    title: {
      text: '广州的一周天气变化',  // 标题
      // link: 'www.baidu.com',
      // target: 'blank',
      subtext: '纯属虚构', // 子标题
      // sublink: 'www.baidu.com',
      // subtarget: 'self'
      textStyle: {
        color: 'red',
        fontSize: 20,
        textShadowColor: '#ddd',
        textShadowOffsetX: '10'
      }
    },
    tooltip: { //提示框，鼠标悬浮交互时的信息提示
      trigger: 'axis', //值为axis显示该列下所有坐标轴对应数据，值为item时只显示该点数
      textStyle: {
        align: 'left',
        color: 'white'
      }, // 提示内容对齐方式
      formatter: '{a} <br/>{b}:{c} ℃', // 提示内容格式器
    },
    legend: { //图例，每个图表最多仅有一个图例
      data: ['最高气温',
        {
          name: '最低气温',
          icon: 'rec' // ‘circle’, ‘rect’, ’roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
        }], // 里面是系列series的name值
      backgroundColor: 'rgb(237, 162, 0)',// 默认transparent
      textStyle: {
        color: 'white',
        fontWeight: 'bolder'
      },
    },
    toolbox: { //工具栏
      show: true,
      feature: {
        mark: {
          show: true
        },
        dataView: { //数据视图
          show: true,
          readOnly: false
        },
        magicType: { // 切换不同的图标类型: 折线、柱状、堆叠、平铺
          show: true,
          type: ['line', 'bar', 'stack', 'tiled'] // 图表
        },
        restore: { //还原原始图表
          show: true
        },
        saveAsImage: { //保存图片
          show: true
        }
      }

    },
    calculable: true, //是否启用拖拽重计算特性
    xAxis: [{
      type: 'category', //坐标轴类型，横轴默认为类目型'category'
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']//数据项
    }],
    yAxis: [{
      type: 'value',//坐标轴类型，纵轴默认为数值型'value'
      axisLabel: {
        formatter: '{value} ℃' //加上单位
      }
    }],
    series: [{ //设置图表数据
      name: '最高气温',
      type: 'line',
      data: [11, 15, 11, 14, 13, 12, 16],
      markPoint: { //系列中的数据标注内容
        data: [{
          type: 'max',
          name: '最大值'
        },
          {
            type: 'min',
            name: '最小值'
          }]
      },
      markLine: { //系列中的数据标线内容
        data: [{
          type: 'average',
          name: '平均值'
        }]
      }
    },
      {
        name: '最低气温',
        type: 'line',
        data: [1, -2, 2, 5, 3, 2, 0],
        markPoint: { //系列中的数据标注内容
          data: [{
            name: '周最低',
            value: -2,
            xAxis: 1,
            yAxis: -1.5
          }]
        },
        markLine: { //系列中的数据标线内容
          data: [{
            type: 'average',
            name: '平均值'
          }]
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  my_chart.setOption(options)

</script>
</html>